<!doctype html>
<html class="no-js ">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Amaze UI Admin index Examples</title>
	<meta name="description" content="这是一个 index 页面">
	<meta name="keywords" content="index">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="icon" type="image/png" href="assets/i/favicon.png">
	<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
	<meta name="apple-mobile-web-app-title" content="Amaze UI" />
	<link rel="stylesheet" href="assets/css/amazeui.css" />
	<link rel="stylesheet" href="assets/css/admin.css">
	<style>
		body {
			background-color: #eee;
		}
		form {
			margin-top: 20%;
			box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
			background-color: #fff;
		}
		footer{
			position: fixed;
			bottom: 0;
			width: 100%;
		}
		#vld-tooltip {
			position: absolute;
			z-index: 1000;
			padding: 5px 10px;
			background: #F37B1D;
			min-width: 150px;
			color: #fff;
			transition: all 0.15s;
			box-shadow: 0 0 5px rgba(0,0,0,.15);
			display: none;
		}

		#vld-tooltip:before {
			position: absolute;
			top: -8px;
			left: 50%;
			width: 0;
			height: 0;
			margin-left: -8px;
			content: "";
			border-width: 0 8px 8px;
			border-color: transparent transparent #F37B1D;
			border-style: none inset solid;
		}

	</style>
</head>

<body>

<div class="am-g am-u-lg-3 am-u-md-4 am-u-sm-centered">

	<form class="am-form" id="login">
		<fieldset class="">
			<legend class="am-margin-top-sm am-text-center">SIGN IN</legend>
			<div class="am-form-group">
				<label for="email">登录邮箱：</label>
				<input class="am-radius" type="email" id="email" data-foolish-msg="请输入登录邮箱" placeholder="输入邮箱" required/>
			</div>

			<div class="am-form-group">
				<label for="pwd">密码：</label>
				<input class="am-radius" type="password" id="pwd" placeholder="请输入密码" pattern="^\d{6}$" required data-foolish-msg="请输入密码" />
			</div>
			<label for="remember-me">
				<input id="remember-me" type="checkbox">
				记住邮箱
			</label>
			<div class="am-form-group">
				<button type="submit" class="am-btn am-btn-success am-radius am-btn-block">提交</button>
			</div>

		</fieldset>
	</form>
</div>

<footer class="am-footer am-footer-default">

	<div class="am-footer-miscs am-vertical-align-bottom">
		<p>由 <a href="http://www.feihuang.org/" title="诺亚方舟" target="_blank" class="">飞煌科技</a> 提供技术支持</p>
		<p>CopyRight©2016 FeiHuang.org Inc.</p>
	</div>
</footer>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/amazeui.min.js"></script>

<script language="JavaScript">
	$(function() {
		var $form = $('#login');
		var $tooltip = $('<div id="vld-tooltip">提示信息！</div>');
		$tooltip.appendTo(document.body);

		$form.validator();

		var validator = $form.data('amui.validator');

		$form.on('focusin focusout', '.am-form-error input', function(e) {
			if (e.type === 'focusin') {
				var $this = $(this);
				var offset = $this.offset();
				var msg = $this.data('foolishMsg') || validator.getValidationMessage($this.data('validity'));

				$tooltip.text(msg).show().css({
					left: offset.left + 10,
					top: offset.top + $(this).outerHeight() + 10
				});
			} else {
				$tooltip.hide();
			}
		});
	});
</script>
</body>
</html>